@charset "utf-8";
html,body,div,ul,ol,li,dd,dt,dl,p,h3,h4,span,input,textarea,select,option,table,
tr,td,header,footer,section{padding:0; margin:0; box-sizing:border-box;
              -o-box-sizing:border-box; -ms-box-sizing:border-box;
              -moz-box-sizing:border-box; 
              -webkit-box-sizing:border-box;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
h1,h2,h3,h4,h5,h6{margin:0; padding:0; -webkit-tap-highlight-color:rgba(0,0,0,0);}
body{font-family: "PingFangSC-Regular",Helvetica,"Droid Sans",Arial,sans-serif,"Microsoft YaHei"
; width:100%; height:100%; min-width:320px;
  color:#666; -moz-text-size-adjust:none; -webkit-text-size-adjust:none; 
  text-size-adjust:none; position:relative;box-sizing:border-box;}
img{border:none; display:block;width:100%;}
ul,li{list-style-type:none;}
a{text-decoration:none; color:#f50;}
input{outline: none;border: none;-webkit-appearance:none;appearance:none;tap-highlight-color:rgba(0,0,0,0);
-webkit-tap-highlight-color:rgba(0,0,0,0);}
.clear{display:block; overflow:hidden; clear:both; height:0;
    line-height:0; font-size:0;}
.clearfix:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}
.fl{float:left; display:block;}
.fr{float:right; display:block;}
.hide{display:none;}
.table{display:table; width:100%;}
.t_cell{display:table-cell; vertical-align:middle;}
.t_row{display:table-row;}

@media screen and (min-width:300px){html,body,input{font-size:15px;}}
@media screen and (min-width:320px){html,body,input{font-size:16px;}}
@media screen and (min-width:340px){html,body,input{font-size:17px;}}
@media screen and (min-width:360px){html,body,input{font-size:18px;}}
@media screen and (min-width:375px){html,body,input{font-size:18.75px;}}
@media screen and (min-width:380px){html,body,input{font-size:19px;}}
@media screen and (min-width:400px){html,body,input{font-size:20px;}}
@media screen and (min-width:414px){html,body,input{font-size:20.7px;}}
@media screen and (min-width:420px){html,body,input{font-size:21px;}}
@media screen and (min-width:440px){html,body,input{font-size:22px;}}
@media screen and (min-width:460px){html,body,input{font-size:23px;}}
@media screen and (min-width:480px){html,body,input{font-size:24px;}}
@media screen and (min-width:500px){html,body,input{font-size:25px;}}
@media screen and (min-width:520px){html,body,input{font-size:26px;}}
@media screen and (min-width:540px){html,body,input{font-size:27px;}}
@media screen and (min-width:560px){html,body,input{font-size:28px;}}
@media screen and (min-width:580px){html,body,input{font-size:29px;}}
@media screen and (min-width:600px){html,body,input{font-size:30px;}}
@media screen and (min-width:620px){html,body,input{font-size:31px;}}
@media screen and (min-width:640px){html,body,input{font-size:32px;}}
@media screen and (min-width:750px){html,body,input{font-size:37.5px;}}
      .mp-wrap {
       position: fixed;
       top: 8rem;
       z-index: 20;
       width: 20rem;
       color: #404040;
      }
      .mp-cont {
        border-radius: 0.27rem;
        background: #fff;
        width: 17.6rem;
        margin: 0 auto;
        font-size: 0.7rem;
        padding-top: 1.173333333333333rem;
      }
      .mp-cont .title{
        font-size: 0.96rem;
        color: #4a4a4a;
        text-align: center;
        line-height: 1.2rem;
      }
      .mp-cont .help{
          font-size:0.96rem;
          color:#666666;
          text-align: center;
          margin-top: 0.4266666666666667rem;
      }
      .mp-cont span{
          color: #ff6600;
      }
      .mp-cont .number{
        width: 15rem;
        border:1px solid #e7e7e7;
        margin:0 auto;
        height: 2.346666666666667rem;
        line-height: 2.6rem;
         margin-top: 0.5333333333333333rem;
         padding-left: 0.4rem;
         padding-right: 1.2rem;
         position: relative;
         border-radius: 5px;
      }
      .mp-cont input{
        width: 13rem;
        font-size: 0.96rem;
      }
      .mp-cont .error{
          position: absolute;
          padding-left: 1.8rem;
          margin-top: 0.5333333333333333rem;
          color: red;
          font-size: 0.7466666666666667rem;
      }
      .mp-cont .line{
        margin: 0 auto;
        background: #e7e7e7;
        height: 1px;
        width: 16rem;
        margin-top: 1.786666666666667rem;
      }
      .mp-cont .submit{
        color: #fff;
        margin: 0 auto;
        font-size: 0.96rem;
        text-align: center;
        line-height: 3.533333333333333rem;
        border-radius: 5px;
      }
      .mp-cont .submit div{
          width: 50%;
         color: #333;
      }
      .mp-cont .submit .active{
          color:#ff5500; 
      }
      .mp-cont .submit div:nth-child(1){
          border-right: 1px solid #e7e7e7;
      }
      .cross{
          width: 0.98666667rem;
          height: 0.96rem;
          border-radius: 50%;
          float: right;
          position: absolute;
          top: 0.7rem;
          right: 0.2rem;
          z-index: 5;
      }
     .cross::before {
          content: '';
          position: absolute;
          top: 0.42666667rem;
          width: 0.64666667rem;
          height: 0.10666667rem;
          background-color: #cccccc;
          -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
          margin-left: 0.16666666rem;
      }
      .cross::after {
          content: '';
          position: absolute;
          top: 0.42666667rem;
          width: 0.64666667rem;
          height: 0.10666667rem;
          background-color: #cccccc;
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          margin-left: 0.16666666rem;
      }
    .fifter {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      position: fixed;
      top: 0;
      left: 0;
      display: none;
    }